<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*
        3.目标伪类
        :target:匹配URL指向的元素
        */
      p {
        height: 300px;
      }

      p:target {
        color: red;
      }

      /*4）UI（表单）元素状态伪类*/
      input:disabled {
        background-color: green;
      }

      input:enabled {
        background-color: rgb(35, 37, 151);
      }

      input:checked {
        /*:checked 只在Opera中有效*/
        color: aqua;
      }

      ::selection {
        /*被选中的文本,在复制文本时使用 注意：必须用双冒号！*/
        color: aqua;
        background-color: gray;
      }

      /*5.否定伪类*/
      .container p {
        height: 10px;
      }

      .container :not(p) {
        /*container类中的非p标签*/
        background-color: red;
        color: #fff;
      }

      /*6.通用兄弟选择器*/
      .div1 ~ strong {
        /*可选择任意兄弟元素不限于同种标签*/
        color: red;
      }
    </style>
  </head>

  <body>
    <!--页内跳转-->
    <a href="#jump1">跳转1</a>
    <a href="#jump2">跳转2</a>
    <a href="#jump3">跳转3</a>
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <p id="jump1">这是段落1的内容</p>
    <!--这里的id表示设置了1个锚点，用来实现页内跳转-->
    <p id="jump2">这是段落2的内容</p>
    <p id="jump3">这是段落3的内容</p>

    <form action="">
      <input type="text" disabled /><br />
      <input type="text" /><br />
      <input type="text" /><br />

      <input type="checkbox" name="face" checked />党员
      <input type="checkbox" name="face" />团员
      <input type="checkbox" name="face" />无党派人士<br />

      <select name="" id="">
        <option value="">大前端开发</option>
        <option value="" selected>大数据开发</option>
        <option value="">UI设计</option>
      </select>
    </form>

    <div class="container">
      <p>p1</p>
      <p>p2</p>
      <span>span</span>
      <em>em</em>
    </div>

    <div class="test">
      <div class="div1">div1</div>
      <div class="div2">div2</div>
      <strong>strong</strong>
      <div class="div3">div3 <span>span</span></div>
    </div>
  </body>
</html>
